<style lang="less" scoped>
    @import './screemchart_1.less';
</style>
<template>
    <div class="BoxChart">
        <p class="BoxChart_title">
            <label >
               <div>{{chartconfig[indexID].name}}
                    <Poptip trigger="hover"  placement="top-start">
                            <Icon type="ios-paper-outline" style="margin-left:5px"/>
                            <span slot="content" :style="isColor">{{chartconfig[indexID].remark==''?"暂无备注":chartconfig[indexID].remark}}</span>
                    </Poptip>
               </div>
               <div class="date">
                    <span>{{date}}</span>
                    <span v-if="JSON.parse(chartconfig[indexID].time).type=='relative'" class="vertical ">|</span>
                    <span v-if="JSON.parse(chartconfig[indexID].time).type=='relative'">{{dynamicTime}}</span>
                </div>
            </label>
            <Dropdown trigger="click" >
                <a href="javascript:void(0)">
                    <i type="md-close" class="del iconfont icon-gengduo"  size="20"></i>
                </a>
                <Dropdown-menu slot="list" style="width:100px">
                    <Dropdown-item  disabled>小</Dropdown-item>
                    <Dropdown-item :selected='chartconfig[indexID].size=="normal"'  @click.native='setWindow("normal")'>中</Dropdown-item>
                    <Dropdown-item :selected='chartconfig[indexID].size=="big"' @click.native='setWindow("big")'>大</Dropdown-item>
                    <Dropdown-item  @click.native="set()" divided >设置</Dropdown-item>
                    <Dropdown-item  @click.native="delCharts(chartconfig[indexID].id)">删除</Dropdown-item>
                </Dropdown-menu>
            </Dropdown>
        </p>
        <Chart :key="chartconfig[indexID].name" v-bind:events="events" v-bind:properties="properties" v-bind:measures="measures" v-bind:chartconfig="chartconfig" :indexID="indexID"></Chart>
    </div>
</template>

<script>
import Chart from './ChartCof_1/ChartCof_1'
import setModule from '../setModule'
export default {
  props:['chartconfig','dashboardId','projectId','indexID','events','properties','measures'],
  data() {
      return {
                date:'',
                dynamicTime:'',
                
        }
  },
  computed:{
      isColor:function(){
          if(this.chartconfig[this.indexID].remark==''){
              return "color:#BFBFCD"
          }
      }
  },
  mounted(){
        let _that=this
        let times=JSON.parse(_that.chartconfig[_that.indexID].time)
            if(times.type == 'absolute'){
                times.values[0]=this.$sessionStore.getDay(-times.values[0])
                times.values[1]=this.$sessionStore.getDay(-times.values[1])
                this.date=times.values[0]+"~"+times.values[1]
            }else if(times.type == 'relative'){
                this.date=times.values[0]+"~"+times.values[1]
                let newdata1=this.dateDiff( times.values[0])
                let newdata2=this.dateDiff( times.values[1])
                if(this.$sessionStore.getDay(0)==times.values[1]&&this.$sessionStore.getDay(0)!==times.values[0]||times.values[0]==times.values[1]){
                    this.dynamicTime='最近'+newdata1+'天'
                }else if(this.$sessionStore.getDay(0)==times.values[1] && this.$sessionStore.getDay(0)==times.values[0]){
                     this.dynamicTime='今日'
                }else {
                    this.dynamicTime='过去'+newdata2+'天~过去'+newdata1+'天'
                }
            }
  },
  methods: {
        set(){
           this.$parent.$parent.$parent.$parent.updatamodal2(this.indexID,'set')
        },
        dateDiff : function(sDate1) {
                var date2 = new Date();
                var date1 = new Date(Date.parse(sDate1.replace(/-/g,   "/")));
                var iDays = parseInt(Math.abs(date2.getTime()- date1.getTime()) /1000/60/60/24); 
                return iDays;
        },
        /**
         * @method 删除charts
        */	  
        delCharts(del_id){
        let _that = this;
        this.$axios.delete(_that.$api.report +'/dashboard-pro/'+_that.dashboardId[0].id+'/block/'+del_id,
            {
                headers: {
                    "Authorization": "Bearer "+this.$sessionStore.fetch(),
                    'Content-type': 'application/json'
                },
                params: {
                    projectId:_that.projectId
                }
            }
        )
        .then(function(res){
            _that.$Message.info('删除成功');
            _that.chartconfig.map((item,index)=>{
                if(item.id == del_id){
                    _that.chartconfig.splice(index,1);
                }
                return true; 
            })
        }).catch(function(err){
            console.log(err);
        })
    },
    setWindow(col){
        this.$parent.$parent.$parent.$parent.changeSize(this.indexID,col)
    }

  },
  components:{
      Chart,
      setModule
  }
}
</script>


